<template>
  <div class="player-progress-container">
    <div class="date-container">
      <div class="date-name">日期</div>
      <div class="date-value">
        <a-range-picker
          :placeholder="['开始日期', '开始日期']"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
        >
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
      </div>
    </div>
    <div class="control-container">
      <a-tooltip v-if="!isPlay">
        <template slot="title">
          开始
        </template>
        <a-icon
          type="play-circle"
          theme="filled"
          class="icon"
          @click="
            isPlay = true;
            navgControl(playIcon);
          "
        />
      </a-tooltip>
      <a-tooltip v-else>
        <template slot="title">
          暂停
        </template>
        <a-icon
          type="pause-circle"
          theme="filled"
          class="icon"
          @click="
            isPlay = false;
            navgControl('pause');
          "
        />
      </a-tooltip>
      <!-- 倍速 -->
      <div
        class="play-speed"
        @mouseenter="isTimesChoose = true"
        @mouseleave="isTimesChoose = false"
      >
        <div class="times-show">{{ times == 1 ? "倍速" : times + ".0x" }}</div>
        <div class="choose-box">
          <ul v-show="isTimesChoose">
            <li
              v-for="item in speedList"
              :key="item"
              :class="{ active: times == item }"
              @click="changeSpeed(item)"
            >
              {{ item }}.0X
            </li>
          </ul>
        </div>
      </div>
      <a-slider
        class="progress-slider"
        v-model="sliderVal"
        :tip-format="hideFormat"
        :tooltip-visible="true"
        :step="0.0001"
      >
      </a-slider>
    </div>
    <div class="operate-container">
      <div class="transparent-bar" v-if="isInput">
        <div class="terrain">地形透明</div>
        <a-input-number
          size="small"
          v-model="inputNumber"
          :formatter="formatterNumber"
          :parser="(value) => value.replace('%', '')"
          :min="0"
          :max="100"
        />
      </div>
      <div @click="handelOpacity()">
        <a-tooltip>
          <template slot="title">
            设置
          </template>
          <icon-fonts
            icon="icon-opacity"
            :class="['set-up', isInput && 'active']"
          ></icon-fonts>
        </a-tooltip>
      </div>
      <div @click="handelRefresh()">
        <a-tooltip>
          <template slot="title">
            重置
          </template>
          <icon-fonts icon="icon-gengxin" class="refresh"></icon-fonts>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isInput: false,
      inputNumber: "",
      //开始按钮是 重新开始 还是 继续
      playIcon: "resume",
      //是否为播放
      isPlay: false,
      //选择速度弹窗的open/close
      isTimesChoose: false,
      //几倍速度播放
      times: 1,
      //
      speedList: [10, 5, 2, 1],
      //进度条滑动速度
      sliderVal: 50,
    };
  },
  methods: {
    formatterNumber(value) {
      if (value) {
        return value + "%";
      } else {
        return value;
      }
    },
    handelOpacity() {
      this.isInput = !this.isInput;
    },
    handelRefresh() {},

    hideFormat() {
      return null;
    },
    // 开始、暂停、继续等操作
    navgControl(action) {
      if (action === "start") {
        let that = this;
        this.sliderVal = 0;
        this.passedTime = "00:00:00";
        setTimeout(() => {
          that.navgtr[action]();
        }, 300);
      } else {
        this.navgtr[action]();
      }
    },
    // 修改倍速
    changeSpeed(times) {
      this.isTimesChoose = false;
      this.times = times;
    },

    calendarChange() {},
  },
};
</script>

<style lang="less" scoped>
.player-progress-container {
  height: 100%;
  width: 100%;
  background: rgba(38, 63, 92, 0.9);
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
  .date-container {
    display: flex;
    align-items: center;
    .date-name {
      margin-right: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 1px;
    }
    .date-value {
      /deep/.ant-calendar-picker {
        width: 248px;
        .ant-input {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid #f2f2f2;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          .ant-calendar-range-picker-separator {
            color: #ffffff;
          }
          .anticon-calendar {
            color: #ffffff;
          }
        }
      }
    }
  }
  .control-container {
    flex: 1;
    padding: 0 24px;
    display: flex;
    align-items: center;
    .icon {
      font-size: 34px;
      color: #1677ff;
    }
    .play-speed {
      display: inline-block;
      position: relative;
      margin: 0 16px 0 16px;
      .times-show {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        cursor: default;
      }
      .choose-box {
        position: absolute;
        top: -150px;
        left: -18px;
        height: 162px;
        transition: all 0.5s linear;
        ul {
          width: 74px;
          background: rgba(255, 255, 255, 0.9);
          box-shadow: 0px 0px 8px 0px rgba(153, 153, 153, 0.2);
          border-radius: 4px;
          padding: 4px 0;
          text-align: center;
          li {
            height: 34px;
            line-height: 34px;
            color: #999999;
            list-style: none;
            cursor: pointer;
            &.active {
              color: #0098ff;
            }
            &:hover {
              color: #0098ff;
              font-size: 13px;
            }
          }
        }
      }
    }
    .progress-slider {
      flex: 1;
      /deep/.ant-slider-rail {
        background: rgba(69, 146, 255, 0.1);
      }
    }
  }
  .operate-container {
    position: relative;
    cursor: pointer;
    display: flex;
    .middle {
      font-size: 24px !important;
    }
    .transparent-bar {
      position: absolute;
      top: -48px;
      left: -90px;
      width: 160px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      padding: 13px 16px;
      .terrain {
        width: 160px;
      }
      /deep/.ant-input-number {
        width: 58px;
      }
    }

    .set-up {
      color: #49cada;
      margin-right: 16px;
      &.active {
        color: #1677ff;
      }
    }
    .refresh {
      color: #ea9356;
    }
  }
}
</style>
